<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <title>导演</title>
    <style>
        .dao {
            width: 800px;
        }

        .layui-form-item .layui-input-inline {
            float: none;
        }
    </style>
</head>

<body style="padding:8px;">
    <form class="layui-form" lay-filter="cmmForm" action="" onsubmit="return false">
        <div class="layui-form-item dao">
            <label class="layui-form-label" style="width:auto;">导演姓名和图片</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-vertype="tips" placeholder="请输入导演姓名" lay-verify="required" autocomplete="off" class="layui-input"
                    id="address">

            </div>
            <button type="button" class="layui-btn" id="btnUpload">
                <i class="layui-icon">&#xe67c;</i>图片上传
            </button>
            <input type="text" name="image" id="imges" lay-verify="required" autocomplete="off" style="display: none;">
            <div class="layui-input-inline" style="width:auto;">
                <button class="layui-btn" id="btnSubmit" type="button" lay-submit="">添加</button>
            </div>
        </div>

    </form>
    <table id="director"></table>
    <script src="../../js/lodash.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        function query(url) {
            const parst = url.split("?");
            if (parst.length == 1) {
                return {};
            }
            const obj = {};
            parst[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            })
            return obj;
        }

        layui.use(['table', 'form', 'upload', 'layer'], function () {
            let table = layui.table;
            let form = layui.form;
            let upload = layui.upload;
            var layer = layui.layer;
            let uploadInst = upload.render({
                elem: '#btnUpload',
                url: "/api/upload/",
                field: "imgfile",
                acceptMime: "image/*",
                size: 500,
                multiple: true,
                drag: true,
                done: function (res) {
                    $("#imges").val(res.data[0]);
                },
                error: function () {
                    console.log("错误");
                }
            });
            const addDirector = query(location.href);
            let add = addDirector.id;

            form.on('submit', async function (data) {
                await $.post("/api/movie/director/" + add, data.field);
                layer.msg('添加导演成功', {
                    icon: 1,
                    time: 1000
                }, tableObj.reload());
            });

            const queryDirector = query(location.href);
            let q = queryDirector.id;

            const tableObj = table.render({
                elem: '#director'
                , url: '/api/Movie/' + q, //数据接口

                parseData: function (res) {
                    return {
                        code: 0,
                        message: "",
                        data: res.data.director,
                        count: res.data.director.length
                    }
                },
                cols: [
                    [
                        {

                            title: '导演名字',
                            field: "name"
                        },
                        {

                            title: '图片',
                            templet: "#imgwbd"
                        },
                        {
                            title: "操作",
                            templet: `
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delDirector('{{d._id}}',this)">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                              `
                        }
                    ]
                ]
            });

            // layer.tips('只想提示地精准些', '#imgwbd');
            $('body').on('mouseover', function () {
                var that = this;
                layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
            });
        });
        function delDirector(id, btn) {
            const deleteDirector = query(location.href);
            let deleteD = deleteDirector.id;
            layer.confirm('确定删除该导演吗？', {
                icon: 0,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/Movie/director/" + deleteD,
                    method: "delete",
                    data: {
                        key: id
                    }
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }
    </script>

    <script id="imgwbd" type="text/html">
        <div><img src="{{d.image}}" alt=""></div>
    </script>
</body>

</html>